<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h2>今天的天气：{{info}}</h2>
			<button @click="onchange">切换天气</button>
			
			<p>a的值为：{{number.a}}</p>
			<button @click="number.a+=2">点击2</button>
			
			<p>b的值为：{{number.b}}</p>
			<button @click="number.b+=3">点击3</button>
		</div>
		<script>
			var vm=new Vue({
				el:'#app',
				data:{
					dis:true,
					number:{
						a:5,
						b:6
					}
				},
				methods:{
					onchange(){
						this.dis=!this.dis
					},
				},
				computed:{
					info(){
						return this.dis ? '晴天':'暴雨天'
					}
				},
				//
				watch:{
					dis:{
						handler(){
							console.log("dis发生了改变")
						}
					}
				}
			})
		</script>
	</body>
</html>